<template>

    <div class="goods-info">
        <!--小球-->
        <transition
                v-on:before-enter="beforeEnter"
                v-on:enter="enter"
                v-on:after-enter="afterEnter"
        >
            <div class="ball" v-show="ball" ref="ball"></div>
        </transition>

        <!--轮播图-->
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <swiper :lunbotu="lunbotu" class="lunbo" :isfull="false"></swiper>
                </div>
            </div>
        </div>

        <!--加购物-->
        <div class="mui-card">
            <div class="mui-card-header">{{cart.title}}</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <p class="price">
                        <span>市场价：<span class="market">￥{{cart.sell_price}}</span></span>&nbsp;&nbsp;&nbsp;
                        <span >销售价：<span class="now">￥{{cart.market_price}}</span></span>
                    </p>
                    <div class="buy-count">
                        购买数量：
                        <num @num="nowNum" :max="cart.stock_quantity"></num>
                    </div>

                    <div class="btn">
                        <mt-button type="primary" size="small">立即购买</mt-button>
                        <mt-button type="danger" size="small" @click="addCart()">加入购物车</mt-button>
                    </div>

                </div>
            </div>
        </div>
        <!--商品参数-->
        <div class="mui-card">
            <div class="mui-card-header">商品参数</div>
            <div class="mui-card-content">
                <div class="mui-card-content-inner detail">
                    <p>商品货号：{{cart.goods_no}}</p>
                    <p>库存情况：{{cart.stock_quantity}}</p>
                    <p>上架时间：{{cart.add_time}}</p>
                </div>
            </div>
            <div class="mui-card-footer">
                <mt-button size="large" plain type="primary">图文介绍</mt-button>
                <mt-button size="large" plain type="danger">商品评论</mt-button>
            </div>
        </div>

    </div>
</template>

<script type="text/ecmascript-6">
    import num from '../subcomponents/goodsInfonum.vue'
    import swiper from '../subcomponents/lunbotu.vue'

    export default {
        data() {
            return {
                lunbotu: [],
                id: this.$route.params.id,
                cart:[],
                ball :false,
                count:1
            }
        },
        created() {
            this.getlunbo()
            this.getcart()
        },
        methods: {
            getlunbo() {

                this.$http.get("api/getthumimages/" + this.id).then(res => {
                    res = res.body.message
                    res.forEach(item => {
                        item.img = item.src
                    })
                    this.lunbotu = res
                    // console.log(this.lunbotu[1].img)
                })
            },
            getcart(){
                this.$http.get("api/goods/getinfo/" + this.id).then(res => {
                    if(res.body.status === 0){
                        this.cart = res.body.message[0]
                    }
                })
            },
            // 动画

            addCart(){
               this.ball= !this.ball

               //  // 小球
               //  let badge = document.getElementById("badge")
               //  badge.innerText = parseInt(badge.innerText) + parseInt(this.count);
               // console.log(typeof badge.innerText)

                // 用Vuex
                var goodsInfo = {
                   id : this.id,
                   count: this.count,
                   price: this.cart.market_price,
                   selected: true
                }
                this.$store.commit("addShoppingCar", goodsInfo)
            },

            beforeEnter: function (el) {
                el.style.transform = 'translate(0,0)'
            },
            enter: function (el, done) {
                el.offsetWidth;
                let ballY = this.$refs.ball.getBoundingClientRect().top
                let ballX = this.$refs.ball.getBoundingClientRect().left
                // console.log(ballX)
                // 徽章位置
                let badge = document.getElementById("badge")
                let badgeY = badge.getBoundingClientRect().top
                let badgeX = badge.getBoundingClientRect().left
                // console.log(badgeX)

                let TX = badgeX - ballX
                let TY = badgeY - ballY
                // console.log(TX)
                // el.style.transform = 'translate('+TX+'px,'+TY+'px)'
                el.style.transform = `translate(${TX}px,${TY}px)`
                el.style.transition="all 0.7s cubic-bezier(.08,-0.45,1,.92)"
                done()
            },
            afterEnter: function (el) {
                this.ball = !this.ball

            },

            // 数值选框子组件传来的值
            nowNum: function (count) {
                this.count = count

            },
        },
        computed:{
            cartNum:function () {

            }
        },
        components: {
            swiper,
            num
        }
    };

</script>

<style lang="stylus" rel="stylesheet/stylus">
    .goods-info
        .ball
            background-color red
            width 15px
            height 15px
            border-radius 50%
            position absolute
            /*left 235px*/
            /*bottom 31px*/
            left: 152px;
            top: 365px;
            z-index: 12;

        .lunbo
            height 172px
            text-align center
        .mui-card-header
            font-weight normal
        .mui-card-content
            .price
                font-weight normal
                .market
                    text-decoration line-through
                .now
                    font-size 16px
                    color red
                    font-weight bold
            .buy-count
                font-weight normal
                color #8f8f94
        .btn
            margin-top 10px
        .mui-card-content-inner
            padding-top 15px
        .mui-card-footer {
            display: block;
            button {
                margin: 15px 0;
            }
        }
        .detail
            p
                font-weight normal
                line-height 20px
</style>